<template>
	<view class="main">
		<!-- <back-fixed title="我的团队"></back-fixed> -->
		<empty-team v-if="empty"></empty-team>
		<view>
			<view class="box" v-if="!empty">
				<view class="title">
					当前加入团队数量：{{totalNum}}
				</view>
				<view class="card" v-for="(v,key) in list" :key="key" @click="gomyTeam(v,key)">
					<!-- <view class="card"> -->
					<view class="left">
						<view class="left_title">
							{{v.name}}（{{v.teamUserCount}}）
						</view>
						<view class="sub_title">
							负责人：{{v.chargePerson}}
						</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right" size="30rpx" color="#CCCCCC"></u-icon>
					</view>
				</view>
				<u-loadmore :status="status" v-if="!empty&&this.list.length>15" />
			</view>
		</view>
		<view class="modal_pop">
			<u-modal v-model="show" @confirm="confirm" @cancel="cancel" :title-style="popTitle"
				:show-cancel-button="true" title="创建团队" confirm-color="#4DC0D9" :cancel-style="{'borderRight':'1px solid #f8f8f8'}">
				<view class="slot-content">
					<u-input v-model="teamName" placeholder="请输入团队名称"  :border="true"
						border-color="#4DC0D9" />
				</view>
			</u-modal>
		</view>
		<go-nav></go-nav>
	
		<view class="sticky">
			<view class="my_button" @click="show = true">
				创建团队
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTeamByUser,
		addTeamByUser,
		getTeamNameNumber
	} from '@/api/index.js'

	export default {
		data() {
			return {
				show: false,
				teamName: '',
				teamNumber: 0,
				totalNum:0,
				popTitle: {
					color: ' #333333',
					'font-size': '36rpx',
					'font-weight': 'bold'
				},
				list: [],
				status: 'loading',
				empty: false,
				pageNum: 1, //当前条目数
				totalCount: 0, //总条目数
				pageSize: 15, //每页总条数
				avg: 0, //总页数
				first: true //标识
			}
		},
		onReachBottom() {
			this.getTeam()
		},
		async onShow() {
			uni.removeStorageSync('teamQr','')
			//console.log(123);
			await this.clearPageStatus()
			this.getTeam()
			this.$forceUpdate()
			//console.log(name);
		},
		onLoad() {
			this.$store.commit('TEAMIDS', '') //首页进来把teamid置空，防止数据错乱
			//this.teamNumber = uni.getStorageSync('teamNumber')
		},
		methods: {
			inputName(){
				if(uni.getStorageSync('userinfo')){
					let name = uni.getStorageSync('userinfo').user.nickName
					//let num = this.teamNumber+1
					if(this.teamNumber == 0){  //等于1的时候不显示，等于2以上的减一
						this.teamName = name + '数字医生团队'
					}else{
						this.teamName = name + '数字医生团队' + this.teamNumber
					}
				}
			},
			async confirm() {
				//心血管一群
				//console.log(this.teamName);
				if (this.teamName) {
					let res = await addTeamByUser({
						name: this.teamName
					})
					if (res.code == 200) {
						this.$u.toast(res.data)
					}else{
						//this.teamName = ''
						this.$u.toast(res.msg)
						return
					}
					//this.teamName = ''
					this.clearPageStatus() //清空
					await this.getTeam()
					//this.$u.route('/pages/team/myTeam') //去首页
					//console.log(123);
				} else {
					this.$u.toast('请输入团队名称')
				}
			},
			gomyTeam(obj,key) {
				//return
				//console.log(this.list,'1212');
				//uni.setStorageSync('teamQr',this.list[key])
				uni.navigateTo({
					url: `/pages/team/myTeam?id=${obj.id}&title=${obj.name}`
				})
			},
			cancel() {
				//this.teamName = ''
			},
			async getMyList(obj) {
				let res = await getTeamByUser(obj)
				this.totalNum = res.total
				let num = await getTeamNameNumber()  //获得团队末尾数字
				console.log(res,555);
				this.teamNumber = num.data
				this.inputName()
				return res
			},
			clearPageStatus() { //清空，当需要重新加载此分页时，先调用清空再调用请求
				this.list = []
				this.first = true
				this.status = 'loading';
				this.pageNum = 1 //当前条目数
				this.totalCount = 0 //总条目数
				this.avg = 0
			},
			async getTeam() { //团队列表
				//console.log(this.pageNum , this.avg);
				let obj = {
					'pageNum': this.pageNum,
					'pageSize': this.pageSize,
				}
				console.log(this.pageNum , this.avg && !this.first);
				if (this.pageNum > this.avg && !this.first) {
					this.status = 'nomore'
					return
				}
				if (this.pageNum == this.avg && this.status !== 'nomore') {
					let res = await this.getMyList(obj) //请求参数在上面拼接好最后
					if (res.code == 200) {
						this.first = false
						this.totalCount = res.total
						this.avg = Math.ceil(this.totalCount / this.pageSize)
						this.pageNum = ++this.pageNum
						this.list.push(...res.rows)
						this.status = 'nomore'
						if (this.list.length > 0) {
							this.empty = false
						} else {
							this.empty = true
						}
						return
					}
				}
				let res = await this.getMyList(obj) //请求参数在上面拼接好最后
				if (res.code == 200) {
					this.first = false
					this.totalCount = res.total
					this.avg = Math.ceil(this.totalCount / this.pageSize)
					this.list.push(...res.rows)
					this.pageNum = ++this.pageNum;
					this.status = 'loading';
					if(this.avg == 1){  //上来就一页，且不能翻页的情况下
						this.status = 'nomore'
					}
				}
				if (this.list.length > 0) {
					this.empty = false
				} else {
					this.empty = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		//position: fixed;
		//position: absolute;
		min-height: 90vh;
		width: 100%;
		background: #F8F8F8;

		.box {
			//height: 100vh;
			background: #F8F8F8;
			//padding-top: 180rpx;
			padding-bottom: 80rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				//font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 32rpx;
				padding: 22rpx 24rpx 0 24rpx;
			}

			.card {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				//height: 50vh;
				.left {
					display: flex;
					flex-direction: column;
					margin-left: 24rpx;
					padding: 20rpx 0;

					//align-items: center;
					.left_title {
						font-family: PingFang SC, PingFang SC;
						//font-weight: 500;
						font-size: 32rpx;
						color: #212121;
						line-height: 38rpx;
					}

					.sub_title {
						font-family: PingFang SC, PingFang SC;
						//font-weight: 500;
						font-size: 26rpx;
						color: #999999;
						margin-top: 12rpx;
						line-height: 30rpx;
					}
				}

				.right {
					margin-right: 20rpx;
				}
			}


		}

		.modal_pop {
			.slot-content {
				padding: 36rpx 30rpx;
			}
		}

		.sticky {
			width: 100%;
			padding: 0 24rpx;
			position: fixed;
			bottom: 0;
			padding-bottom: 80rpx;
			background-color: #FFFFFF;
			z-index: 1000;

			.my_button {
				background-color: #4DC0D9;
				font-family: PingFang SC, PingFang SC;
				//font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 0;
				border-radius: 20rpx;

			}
		}
	}
</style>